<template>
    <div class="qj">
        <div class="qj-left">
            <el-input class="inp" size="small" placeholder="Please Input" prefix-icon="Search" />
            <el-tree :data="data" class="inp" icon="Plus" />
        </div>
        <div class="qj-right">
            <div class="qj-filter">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="考勤日期：" style="flex: 1;">
                        <el-date-picker type="date" placeholder="Pick a day" />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary">导出</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="qj-list-table">
                <el-table border style="width: 100%; max-height: 350px; font-size: 10px;">
                    <el-table-column label="年级" />
                    <el-table-column label="应到人数" />
                    <el-table-column label="实到人数" />
                    <el-table-column label="迟到" />
                    <el-table-column label="缺勤" />
                    <el-table-column label="出勤率" />
                </el-table>
            </div>
            <div class="qj-right-fenye">
                <el-pagination background layout="prev, pager, next" :total="100" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
interface Tree {
    label: string
    children?: Tree[]
}
const data: Tree[] = [
    {
        label: '全部',
        children: [
            {
                label: '一年级',
                children: [
                    {
                        label: '一年级一班'
                    }
                ]
            },
            {
                label: '二年级',
            },
            {
                label: '三年级',
            },
            {
                label: '四年级',
            },
        ],
    },
]
</script>

<style scoped lang="scss">
.qj {
    width: 100%;
    height: 584px;
    background: #f7f7f7;
    display: flex;

    .qj-left {
        width: 200px;
        height: 100%;
        margin-right: 15px;
        background: #fff;
        text-align: center;

        .inp {
            width: 180px;
            margin: 0 auto;
            margin-top: 20px;
        }
    }

    .qj-right {
        flex: 1;
        height: 564px;
        background: #fff;
        padding: 20px 20px 0px;

        .qj-right-fenye {
            margin-top: 15px;
            display: flex;
            justify-content: end;
        }

        .el-table {
            text-align: center;
        }
    }
}
</style>